<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili 登录页面</title>
    <style>
        * {
            font-family: '微软雅黑';
           
        }
        .demo {
            margin: 0 auto;
            margin-top: 150px;
            width: 800px;
            height: 500px;
            border:1px solid #eee;
            /* 边框弧线 */
            border-radius: 8px;
            position: relative;
        }
        .img1 {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
        }
        .img2 {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
        }
        .middle-demo {
            display: flex;
            margin: 0 auto;
            margin-top: 50px;
            /* 子元素垂直排列 */
            flex-direction: column;
            width: 700px;
            height: 400px;
        }
        .top-demo {
            display: flex;
            width: 100%;
            height: 80%;
        }
        .left-demo {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35%;
            height: 100%;
            border-right: 1px solid #eee;
        }
        .left-demo1 {
            display: flex;
            flex-direction: column;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            height: 100%;
        }
        .text1 {
            text-align: center;
            font-size:17px;
            width: 100%;
            color: rgb(80, 79, 79);
        }
        .img {
            align-self: flex-end;
            margin-bottom: 10px;
            border:1px solid #eee;
            border-radius: 8px;
        }
        .text2 {
            text-align: center;
            width: 100%;
            font-size: 13px;
            color: rgb(68, 68, 68);
        }
        .right-demo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 65%;
            height: 100%;
        }
        .text3 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20%;
            font-size:17px;
        }
        .text3-1 {
            padding-right: 20px;
            border-right: 2px solid #eee;
            /* 鼠标悬停时显示禁止操作样式 */
            cursor: not-allowed;
            color: deepskyblue;
        }
        .text3-2 {
            padding-left: 20px;
            color: rgb(80, 79, 79);
            /* 鼠标悬停时显示可以操作样式 */
            cursor: pointer;
        }
        .form {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 60%;
            width: 80%;
        }
        .form1 {
            width:100%;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .input {
            display: flex;
        }
        input {
            /* 失去焦点 */
            outline: none; 
            /* 失去默认边框 */
            border: none;
            /* 输入框背景设为透明 */
            background: transparent;
            font-size:16px;
        }
        .input p {
            font-size:15px;
            padding: 8px; 
        }
        .input a {
            color: deepskyblue;
            margin-top:24px;
            margin-left: 40px;
        }
        button {
            outline: none;
            border: none;
            background: transparent;
            font-size: 15px;
            cursor: pointer;
        }
        .form2-1 {
            border: 1px solid #eee;
            border-radius: 8px;
            padding:10px 75px;
        }
        .form2-2 {
            background-color: deepskyblue;
            color: #ffffff;
            border: 1px solid deepskyblue;
            border-radius: 8px;
            padding:10px 75px;
        }
        .text4 {
            color: rgb(137, 137, 137);
            justify-content: center;
            align-items: center;
            font-size: 13px;
        }
        .text4-1 {
           margin-left: 89px;
        }
        .img3 {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .img3 > div {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .bottom-demo {
            display: flex;
            width: 100%;
            height: 20%;
            color: rgb(137, 137, 137);
            justify-content: center;
            align-items: center;
            font-size: 13px;
        }
        .bottom-demo1 {
            margin-bottom: 20px;
            line-height: 5px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="middle-demo">
            <div class="top-demo">
                <div class="left-demo">
                    <div class="left-dmeo1">
                        <p class="text1"><b>扫描二维码登录</b></p>
                        <div class="img">
                            <img src="./image/二维码.jpg" alt="" style="width: 150px;">
                                <img src="#" alt="">
                        </div>
                        <div class="text2">
                            <!-- text-decoration: none;消除文字链接下划线 -->
                            <div class="text2-1">请使用 <a href="https://app.bilibili.com/?spm_id_from=333.1007.0.0" style="text-decoration: none; color: deepskyblue;">哔哩哔哩客户端</a></div>
                            <div class="text2-2">扫码登录或扫码下载APP</div>
                        </div>
                    </div>
                </div>
                <div class="right-demo">
                    <div class="text3">
                        <div class="text3-1">密码登录</div>
                        <div class="text3-2">短信登录</div>
                    </div>
                    <div class="form">
                        <div class="form1">
                            <div class="input" style="border-bottom: 1px solid #eee;">
                                <p>账号</p>
                                <input type="text" placeholder="请输入账号">
                            </div>
                            <div class="input">
                                <p>密码</p>
                                <input type="password" placeholder="请输入密码">
                                <a href="#" style="text-decoration: none;">忘记密码?</a>
                            </div>
                        </div>
                    </div>
                    <div class="form2">
                        <button class="form2-1">注册</button>
                        <button class="form2-2">登录</button>
                    </div>
                    <div class="text4">
                        <p class="text4-1">其他方式登录</p>
                        <div class="img3">
                            <div class="wx">
                                <img src="./image/微信.jpg" alt="" style="width: 30px;"><span> 微信登录 </span> 
                            </div>
                            <div class="wb">
                                <img src="./image/微博.jpg" alt="" style="width: 30px;"><span> 微博登录 </span> 
                            </div>
                            <div class="qq">
                                <img src="./image/QQ.jpg" alt="" style="width: 30px;"><span> QQ登录 </span> 
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="bottom-demo">
                <div class="bottom-demo1">
                    <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
                    <p>登录或完成注册即代表你同意 <a href="https://www.bilibili.com/protocal/licence.html" style="text-decoration: none; color: deepskyblue;">用户协议</a> 和 <a href="https://www.bilibili.com/blackboard/privacy-pc.html" style="text-decoration: none; color: deepskyblue;">隐私政策</a></p>
                </div>
            </div>
        </div>
        <img src="./image/左下角.jpg" alt="" class="img1">
        <img src="./image/右下角.jpg" alt="" class="img2"> 
    </div>
</body>
</html>